<!-- 指标任务配置 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="35%"
    destroy-on-close
  >
    <div
      class="form-box"
      style="max-height: 500px; overflow: hidden; overflow-y: auto"
    >
      <el-form
        ref="pointerFormRef"
        :rules="rules"
        :model="dialogForm"
        label-width="120px"
      >
        <el-form-item label="来源列：" prop="selectColumns">
          <el-input
            v-model="dialogForm.selectColumns"
            placeholder="请输入来源列select"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="来源表：" prop="fromTables">
          <el-input
            v-model="dialogForm.fromTables"
            placeholder="请输入来源表from"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="关联条件：" prop="whereConditions">
          <el-input
            v-model="dialogForm.whereConditions"
            placeholder="请输入关联条件where"
            type="textarea"
          />
        </el-form-item>
        <el-form-item
          label="目标表："
          prop="targetModelId"
          class="reset-form-item"
        >
          <tree-select
            class="custom-tree-select"
            v-model="dialogForm.targetModelId"
            :options="treeData"
            searchable
            clearable
            :default-expand-level="2"
            :normalizer="normalizer"
            placeholder="请选择要插入的目标表"
          />
        </el-form-item>
        <el-form-item label="写入模式：" prop="writeMode">
          <el-input
            v-model="dialogForm.writeMode"
            type="textarea"
            placeholder="请输写入模式"
          />
        </el-form-item>
        <el-form-item label="目标列：" prop="targetColumns">
          <el-input
            v-model="dialogForm.targetColumns"
            type="textarea"
            placeholder="请输目标列into"
          />
        </el-form-item>
        <el-form-item label="CRON：" prop="cron">
          <el-input v-model="dialogForm.cron" placeholder="请输任务配置cron" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "PointerConfig",
  components: {
    TreeSelect,
  },
  data() {
    return {
      dialogTitle: "配置指标任务",
      dialogVisible: false,
      // 提交信息
      dialogForm: {
        selectColumns: null,
        fromTables: null,
        whereConditions: null,
        targetModelId: null,
        writeMode: null,
        targetColumns: null,
        cron: null,
      },
      rules: {},
      defaultProps: {
        label: "name",
        children: "children",
      },
      treeData: [],
    };
  },
  methods: {
    // 打开弹窗
    openDialog(info) {
      this.getTreeData();
      this.dialogTitle = `配置指标任务${
        info.taskName ? "：" + info.taskName : ""
      }`;
      Object.assign(this.dialogForm, info);
      this.dialogVisible = true;
    },
    // 获取目标表数据
    getTreeData() {
      this.$axios
        .get(this.$api.dataConnection.dataAggregation.getTargetTable, {})
        .then((res) => {
          if (res.data.code === 200) {
            this.treeData = res.data.data;
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: Array.isArray(node.children)
          ? node.children.length
            ? node.children
            : undefined
          : undefined,
      };
    },
    confirmDialog() {
      this.$refs.pointerFormRef.validate((valid, fields) => {
        if (valid) {
          this.$axios
            .post(
              this.$api.dataConnection.dataAggregation.saveTaskConfig,
              this.dialogForm
            )
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message || "配置成功");
                this.dialogVisible = false;
              } else {
                this.$message.warning(res.data.message);
              }
            });
        }
      });
    },
  },
};
</script>
<style scoped></style>
